import { reactive, onMounted, defineComponent, toRefs, getCurrentInstance } from 'vue'
import productApi from '@/api/inwarehouse/product-api'
import ownerApi from '@/api/inwarehouse/owner-api'
import inventoryApi from '@/api/inwarehouse/inventory-api'
import ZlrtTable from '@/components/zlrt-table/table.vue'
import ZlrtSearch from '@/components/zlrt-search/search.vue'
import TableContext from '@/components/zlrt-table/table-context'
import { ElMessage } from 'element-plus'
import projectApi from '@/api/inwarehouse/project-api'

export default defineComponent({
  components: {
    ZlrtTable,
    ZlrtSearch
  },
  setup() {
    const isCompleteOptions = [
      { label: '整货', value: true },
      { label: '散货', value: false }
    ]

    const ctx = reactive(new TableContext(getCurrentInstance(), {
      title: '产品',
      api: productApi,
      columns: [
        { prop: 'projectName', label: '项目名称', valueType: 'slot', width: 300 },
        { prop: 'skuName', label: '产品名称', valueType: 'slot' },
        { prop: 'barCode', label: '产品编码', valueType: 'input', width: 120 },
        { prop: 'productBoxNumber', label: '柜号', valueType: 'input', width: 120 },
        { prop: 'serialNumber', label: '出厂编号', width: 120 },
        // { prop: 'specification', label: '规格型号' },
        // { prop: 'unit', label: '单位' },
        // { prop: 'price', label: '单价（¥）' },
        { prop: 'inspectionImg', label: '质检报告', slot: true, width: 100},
        { prop: 'operation', label: '操作', slot: true, width: '150', fixed: 'right' }
      ],
      // rules: {
      //   barCode: [{ required: true, message: '请输入产品编码', trigger: 'blur' }],
      //   skuName: [{ required: true, message: '请输入产品名称', trigger: 'blur' }],
      //   // ownerId: [{ required: true, message: '请选择货主', trigger: 'blur' }]
      // },
      other: {
        upload(options) {
          // data.importLoading = true;
          // console.log(options)
          data.dialogVisible = true;
        },
        getFile(flie) {
          data.fileList.push(flie);
        },
        downInspectionImg(url) {
          window.open(url);
        },
        async importFile() {
          data.importLoading = true
          let formData = new FormData()
          data.fileList.map(file => {
            if(file.raw) {
              formData.append('file', file.raw)
            }
          })
          const res = await inventoryApi.upload(formData)
          data.importLoading = false
          if(res.success) {
            ElMessage.success('上传成功');
            data.dialogVisible = false;
          }
        },
        getComplete: (val) => {
          if (!val) {
            return '-'
          }
          return data.isCompleteOptions.find(item => {
            return item.value === val
          }).label
        },
        handleOwnerChange: (val) => {
          if (!val) {
            return '-'
          }
          const obj = data.ownerOptions.find(item => {
            return item.id === val
          })
          ctx.editData.ownerName = obj.name
        }
      }
    }))

    const data = reactive({
      ctx,
      importFiles: [],
      importLoading: false,
      dialogVisible: false,
      formData: {},
      isCompleteOptions,
      ownerOptions: [],
      fileList: [],
      projectOptions: []
    })

    const changeProject = (val) => {
      const obj = data.projectOptions.find(item => {
        return item.id === val
      })
      console.log(obj)
      if(obj) {
        ctx.editData.projectName = obj['name'];
        ctx.editData.projectOriginalNo = obj['originalNo'];
      }
    }

    const getOwner = async () => {
      const params = { filter: { disabled: false } }
      const res = await ownerApi.list(params)
      data.ownerOptions = res.data.records
    }

    const getProject = async () => {
      const params = { filter: { disabled: 2 } }
      const res = await projectApi.list(params)
      data.projectOptions = res.data.records
    }

    // init
    onMounted(async () => {
      // await getOwner()
      getProject()
      ctx.loadData()
    })

    return {
      ...toRefs(data),
      changeProject
    }
  }
})
